<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>PHOS</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/AdminLTE.min.css">
    <link rel="stylesheet" href="loading/load.css">
    <!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
    <link rel="stylesheet" href="css/all-skins.min.css">
    <!--<link rel="stylesheet" href="css/main.css">-->
    <link href="css/style.css" rel="stylesheet">
    <script src="libs/jquery.min.js"></script>
    <script src="libs/vue.min.js"></script>


    <script src="plugins/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="plugins/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <![endif]-->
</head>
<!-- ADD THE CLASS layout-boxed TO GET A BOXED LAYOUT -->
<body class="hold-transition skin-blue sidebar-mini">
<!-- Site wrapper -->
<div  id="app">

    <div class="wrapper" v-cloak style="background-color: #eee;">

        <header class="main-header">
            <a href="javascript:;" class="logo" data-ride="carousel" data-interval="2000">
                <!-- mini logo for sidebar mini 50x50 pixels -->
                <span class="logo-mini"><b>PHOS</b></span>
                <!-- logo for regular state and mobile devices -->
                <span class="logo-lg"><img src="favicon.ico" alt="icon" width="20%"><label style="margin-left: 10px;">PHOS</label></span>
            </a>
            <!-- Header Navbar: style can be found in header.less -->
            <nav class="navbar navbar-static-top" role="navigation">
                <!-- Sidebar toggle button-->
                <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
                    <span class="sr-only">Toggle navigation</span>
                </a>
                <div style="float:left;color:#fff;padding:15px 10px;">欢迎 {{user.username}}</div>
                <div class="navbar-custom-menu">
                    <ul class="nav navbar-nav">
                        <!--<li><a href="javascript:;" @click="getBaseInfo"><i class="fa fa-info-circle"></i> &nbsp;基本资料</a></li>-->
                        <li><a href="javascript:;" @click="updatePassword"><i class="fa fa-lock"></i> &nbsp;修改密码</a></li>
                        <li v-show="user.type == 1"><a href="javascript:;" @click="cancellation"><i class="fa fa-dot-circle-o"></i> &nbsp;注销</a></li>
                        <li><a href="javascript:;" @click="logout"><i class="fa fa-sign-out"></i> &nbsp;退出系统</a></li>
                    </ul>
                </div>
            </nav>

            <div class="navbar row content-tabs" style="min-height: 40px; background-color:#fafafa">
                <button class="roll-nav roll-left J_tabLeft"><i class="fa fa-backward"></i>
                </button>
                <nav class="page-tabs J_menuTabs">
                    <div class="page-tabs-content">
                    </div>
                </nav>
                <button class="roll-nav roll-right J_tabRight"><i class="fa fa-forward"></i>
                </button>
                <div class="btn-group roll-nav roll-right">
                    <button class="dropdown J_tabClose" data-toggle="dropdown">关闭操作<span class="caret"></span>
                    </button>
                    <ul role="menu" class="dropdown-menu dropdown-menu-right">
                        <li class="J_tabCloseAll">
                            <a>关闭全部选项卡</a>
                        </li>
                        <li class="J_tabCloseOther">
                            <a>关闭其他选项卡</a>
                        </li>
                    </ul>
                </div>
            </div>

        </header>

        <!-- Left side column. contains the sidebar -->
        <aside class="main-sidebar">
            <!-- sidebar: style can be found in sidebar.less -->
            <section class="sidebar">
                <!-- /.search form -->
                <!-- sidebar menu: : style can be found in sidebar.less -->
                <ul class="sidebar-menu" id="menuInfo" data-widget="tree">
                    <li class="header">PHOS</li>
                    <li class="treeview active">
                        <a href="#" url="main.html" id="supplierIndex" class="J_menuItem">
                            <i class="fa fa-home"></i> <span>首页</span>
                        </a>
                    </li>
                    <div style="display: none;">
                        <a id="indexHtmlId" href="main.html" class="J_menuItem">
                            <i class="fa "></i> <span style="padding-left: 8px;">首页</span>
                        </a>
                    </div>

                    <!-- vue生成的菜单 -->
                    <!--<menu-item :item="item" :index="index" v-for="(item, index) in menuList"></menu-item>-->
                </ul>
            </section>
            <!-- /.sidebar -->
        </aside>
        <div v-show="!ifUser">
            <div class="loadEffect">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
        <div  class="content-wrapper J_mainContent" id="content-main">

        </div>

        <footer class="main-footer">
            <div class="pull-right hidden-xs">
                Version 1.1.0
            </div>
            Copyright &copy; 2019 <a href="../" target="_blank">PHOS</a> All Rights Reserved
        </footer>

        <!-- Add the sidebar's background. This div must be placed
             immediately after the control sidebar -->
        <div class="control-sidebar-bg"></div>

        <!-- 修改密码 -->
        <div id="passwordLayer" style="display: none;overflow: hidden;">
            <form class="form-horizontal">
                <div class="form-group" style="margin-top: 10px">
                    <div class="form-group">
                        <div class="col-sm-2 control-label">账号</div>
                        <div class="col-sm-9">
                            <input type="text" readonly class="form-control" :value="user.username" placeholder="账号"/>
                        </div>
<!--                        <span class="label label-success" style="vertical-align: bottom;">{{user.username}}</span>-->
                    </div>
                    <div class="form-group">
                        <div class="col-sm-2 control-label">原密码</div>
                        <div class="col-sm-9">
                            <input type="password" class="form-control" v-model="password" placeholder="原密码"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-2 control-label">新密码</div>
                        <div class="col-sm-9">
                            <input type="password" class="form-control" v-model="newPassword" placeholder="新密码"/>
                        </div>
                    </div>
                    <div class="form-group" id="error" style="display: none">
                        <div class="col-sm-11 control-label"><span  style="color: red">两次密码输入不一致！</span></div>
                    </div>
                </div>
            </form>
        </div>

    </div>
</div>

<!-- ./wrapper -->

<script type="application/javascript">

    $(function () {
        $.ajax(getMenuList);
    });

    var getMenuList = {
        url: '/sys/menu/nav',
        type: 'GET',
        dataType: 'json',
        contentType: 'application/json;charset=UTF-8',
        async: false,
        success: function (result) {
            loadData(result);
        }
    }

    function loadData(result) {

        if (result != null) {
            var str = "";
            $.each(result.menuList, function (i, val) {
                var str = "<li class='treeview'>";
                if (val.type == 0) {
                    str += '<a href="javascript:;">';
                    if (val.icon != null) {
                        str += '<i class="' + val.icon + '"></i>';
                    }
                    str += '<span>' + val.name + '</span>';
                    if (val.icon == 'fa fa-envelope') {
                        str = str + '<small class="label pull-right bg-yellow" id="taskNum">'+1+'</small>';
                    }else{
                        str += '<i class="fa fa-angle-left pull-right"></i>';
                    }
                    str += '</a>';
                    if (val.type == 0) {
                        str = str + "<ul class='treeview-menu'>";
                        $.each(val.list, function (j, detailVal) {
                            str = str + "<li><a class='J_menuItem' href='" + detailVal.url + "' url='" + detailVal.url + "' >";
                            if (detailVal.icon != null) {
                                str += '<i class="' + detailVal.icon + '"></i>';
                            } else {
                                str += '<i class="fa fa-circle-o"></i>';
                            }
                            str = str + "<span>" + detailVal.name + "</span>";
                            /*if (val.icons == 'fa-envelope') {
                                str = str + "<span class='label label-primary pull-right' id='msgNum_" + (j + 1) + "'>0</span>";
                            }*/
                            str = str + "</a></li>";
                        });
                        str = str + "</ul>";
                        str = str + "</li>";
                    }

                    $("#menuInfo").append(str);
                }
            });

            if(window.screen.height - $("#menuInfo").height() <= window.screen.height * 0.5) {
                var num = window.screen.height * 0.8;
                $("#menuInfo").attr("style", "height:" + num + "px;overflow-y:scroll;");
            }

            //				userRole = result.userInfo.roleId;

            /*if (userRole == 1 || userRole == 2)
            {
                $("#loginUserInfo").html("欢迎登录 - " + result.userInfo.realName);
            } else
            {
                $("#loginUserInfo").html(result.conditionName + " - " + result.userInfo.realName);
            }

            $("#userTitle").html(result.userInfo.realName);*/

        }
    }

</script>


<!--<script src="libs/jquery.min.js"></script>-->
<script src="libs/bootstrap.min.js"></script>
<script src="plugins/select2/select2.full.min.js"></script>
<script src="plugins/jqgrid/jquery.jqGrid.min.js"></script>
<!--<script src="libs/router.js"></script>-->
<!-- Slimscroll -->
<script src="libs/jquery.slimscroll.min.js"></script>
<script src="libs/app.js"></script>
<script src="libs/contabs.js"></script>
<script src="plugins/layer/layer.js"></script>
<script src="js/common.js"></script>
<script src="js/index.js"></script>
<script>
    $(function () {
        $('.select2').select2();
        init();
    });

    function init() {
        menuItem2("indexHtmlId");
        $("#supplierIndex").attr('href', "main.html");
    }

    //登陆成功后，根据登陆者角色不同，跳转不同的页面
    function menuItem2(id) {
        var obj = $("#" + id);
        // 获取标识数据
        var dataUrl = obj.attr('href'),
            dataIndex = obj.data('index'),
            menuName = $.trim(obj.text()),
            flag = true;
        console.log("dataIndex:" + dataIndex);
        if (dataUrl == undefined || $.trim(dataUrl).length == 0) return false;

        // 选项卡菜单已存在
        $('.J_menuTab').each(function () {
            if (obj.data('id') == dataUrl) {
                if (!obj.hasClass('active')) {
                    obj.addClass('active').siblings('.J_menuTab').removeClass('active');
                    scrollToTab(this);
                    getTaskNum();
                    // 显示tab对应的内容区
                    $('.J_mainContent .J_iframe').each(function () {
                        if (obj.data('id') == dataUrl) {
                            obj.show().siblings('.J_iframe').hide();
                            return false;
                        }
                    });
                }
                flag = false;
                return false;
            }
        });

        // 选项卡菜单不存在
        if (flag) {
            var str = '<a href="javascript:;" class="J_menuTab active" data-id="' + dataUrl + '">' + menuName + ' <i class="fa fa-times-circle"></i></a>';
            $('.J_menuTab').removeClass('active');

            // 添加选项卡对应的iframe
            var str1 = '<iframe class="J_iframe"  name="iframe' + dataIndex + '" width="100%" src="' + dataUrl + '" frameborder="0" data-id="' + dataUrl + '" seamless></iframe>';

            $('.J_mainContent').find('iframe.J_iframe').hide();
            $("#content-main").append(str1);

            //显示loading提示
            var loading = layer.load();

            $('.J_mainContent iframe:visible').load(function () {
                //iframe加载完成后隐藏loading提示
                layer.close(loading);
            });
            // 添加选项卡
            $('.J_menuTabs .page-tabs-content').append(str);

            $("iframe[name=iframe" + dataIndex + "]").height(window.innerHeight - 140);

            console.log($("iframe[name=iframe" + dataIndex + "]").height());
            scrollToTab($('.J_menuTab.active'));
        }
        return false;
    }

    //滚动到指定选项卡
    function scrollToTab(element) {
        var marginLeftVal = calSumWidth($(element).prevAll()),
            marginRightVal = calSumWidth($(element).nextAll());
        // 可视区域非tab宽度
        var tabOuterWidth = calSumWidth($(".content-tabs").children().not(".J_menuTabs"));
        //可视区域tab宽度
        var visibleWidth = $(".content-tabs").outerWidth(true) - tabOuterWidth - 230;
        //实际滚动宽度
        var scrollVal = 0;
        if ($(".page-tabs-content").outerWidth() < visibleWidth) {
            scrollVal = 0;
        } else if (marginRightVal <= (visibleWidth - $(element).outerWidth(true) - $(element).next().outerWidth(true))) {
            if ((visibleWidth - $(element).next().outerWidth(true)) > marginRightVal) {
                scrollVal = marginLeftVal;
                var tabElement = element;
                while ((scrollVal - $(tabElement).outerWidth()) > ($(".page-tabs-content").outerWidth() - visibleWidth)) {
                    scrollVal -= $(tabElement).prev().outerWidth();
                    tabElement = $(tabElement).prev();
                }
            }
        } else if (marginLeftVal > (visibleWidth - $(element).outerWidth(true) - $(element).prev().outerWidth(true))) {
            scrollVal = marginLeftVal - $(element).prev().outerWidth(true);
        }
        $('.page-tabs-content').animate({
            marginLeft: 0 - scrollVal + 'px'
        }, "fast");
    }

    //计算元素集合的总宽度
    function calSumWidth(elements) {
        var width = 0;
        $(elements).each(function () {
            width += $(this).outerWidth(true);
        });
        return width;
    }
</script>
</body>
</html>
